import React, { Component } from 'react'
import { DetailContainer, DetailContextContainer } from './style'
import List from '../communityDetail/List'
import { get } from 'utils/http'

export default class comDetail extends Component {
    state = {
        topic: {},
        list: []
    }
    componentDidMount() {
        this.topic = JSON.parse(localStorage.getItem('community'))
        // console.log(this.topic)
        this.setState({
            topic: this.topic
        })
        this.getGenralList(this.topic.specialId)
    }

    async getGenralList(id) {
        this.teslaList = await get({
            url: `http://h5test.wfdata.club/v1/special/${id}/detail`,
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })
        this.setState({
            list: this.teslaList.data.specialContent.threadList
        })
        // console.log(this.state.list)
    }
    back=()=>{
        this.props.history.go(-1)
    }
    render() {
        return (
            <div style={
                {
                    height: '100%',
                    overflow: 'scroll',

                }
            }>
                <DetailContainer>
                    <img src={this.state.topic.picture} alt="" />
                    <i className="yo-ico" onClick={this.back}>&#xe743;</i>
                    <div className="sideName">
                        <i className="yo-ico">&#xe612;</i>
                        <span>{this.state.topic.virtualTid}</span>
                    </div>
                </DetailContainer>
                <DetailContextContainer>
                    <h1>{this.state.topic.title}</h1>
                    <p>
                        {this.state.topic.introduction}
                    </p>
                    <div className='bottom'>
                        <span>
                            {this.state.topic.publishTime}
                        </span>
                        <b>
                            {this.state.list.length}篇
                        </b>
                    </div>
                </DetailContextContainer>

                <List list={this.state.list}></List>
            </div>
        )
    }
}
